// 定义需要用到的dom对象

const progress = document.getElementById('progress');
const prev = document.getElementById('prev');
const next = document.getElementById('next');
const circles = document.querySelectorAll('.circle');
console.log(circles)
// 保存当前步骤数
let currentActive = 1;

prev.addEventListener('click', () => {
    // 当currentActive大于1时，可以回退到前一步
    if (currentActive > 1) {
        currentActive--;
        update();
    }
})

next.addEventListener('click', () => {
    // 当currentActive小于步骤数量时可以前进一步
    if (currentActive < circles.length) {
        currentActive++;
        update();
    }
})

function update() {
    // 更新步骤数
    circles.forEach((circle, index) => {
        if (index < currentActive) {
            circle.classList.add('active');
        } else {
            circle.classList.remove('active');
        }
    })
    // 更新进度条百分比
    progress.style.width = (currentActive - 1) / (circles.length - 1) * 100 + '%';

    // 更新按钮状态
    if (currentActive === 1) {
        prev.disabled = true;
    } else if (currentActive === circles.length) {
        next.disabled = true;
    } else {
        prev.disabled = false;
        next.disabled = false;
    }
}